<script>
import { merge, omit } from "lodash";
import BaseForm from "../Form/form.vue";
export default {
  props: {
    searchOptions: {
      type: Object,
    },
  },
  data() {
    return {
      formData: {},
      resetFormData: {},
      autoReload: {
        autoreloadOpen: false, // 开启自动刷新
        autoreloadSec: 300, // 自动刷新时间
      },
    };
  },
  inject: ["context"],
  computed: {
    formOptions() {
      const searchOptions = merge(
        {
          columns: [],
          search: true,
          reset: true,
          autoreload: false, // 显示自动刷新按钮
        },
        this.searchOptions
      );
      const columns =
        searchOptions.columns.map((column) => {
          return merge(
            {
              width: "160px",
              height: "32px",
              labelWidth: 0,
              labelAlignTop: true,
            },
            column
          );
        }) || [];
      if (searchOptions.search) {
        columns.push({
          comtype: "button",
          class: "anoe-button-search",
          label: $AONE_LAN.search,
          type: "primary",
          onClick: this.context?.onSearch,
        });
      }
      if (searchOptions.reset) {
        columns.push({
          comtype: "button",
          class: "anoe-button-reset",
          label: $AONE_LAN.reset,
          type: "warning",
          onClick: this.onReset,
        });
      }
      if (searchOptions.excel) {
        columns.push({
          comtype: "button",
          class: "anoe-button-excel",
          label: $AONE_LAN.exportExcel,
          type: "success",
          onClick: this.context?.onExcel,
        });
      }
      if (searchOptions.excelInfo) {
        columns.push({
          comtype: "button",
          class: "anoe-button-excelInfo",
          label: $AONE_LAN.exportInfo,
          type: "success",
          onClick: this.context?.onExcelInfo,
        });
      }
      if (searchOptions.autoreload) {
        columns.push({
          comtype: "button",
          class: "anoe-button-autoreload",
          label: !this.autoReload.autoreloadOpen
            ? $AONE_LAN.openAutoreload
            : $AONE_LAN.closeAutoreload,
          type: "warning",
          onClick: () => {
            this.autoReload.autoreloadOpen = !this.autoReload.autoreloadOpen;
            console.log(this.formData);
            if (this.autoReload.autoreloadOpen) {
              this.$nextTick(() => {
                this.context.onAutoReload(this.formData.inner_autoreload); // 启动自动刷新定时器
              });
            } else {
              this.context.onAutoReload(0); // 取消自动刷新定时器
            }
          },
        });
      }
      if (this.autoReload.autoreloadOpen) {
        columns.push({
          comtype: "select",
          prop: "inner_autoreload",
          class: "anoe-select-autoreload",
          clearable: false,
          filterable: false,
          width: "100px",
          value: 300,
          dicData: [60, 90, 120, 180, 300].map((it) => {
            return { label: it + $AONE_LAN.sec, value: it };
          }),
          onChange: (val) => {
            this.$nextTick(() => {
              this.context.onAutoReload(val);
            });
          },
        });
      }
      return merge(
        {
          columns,
        },
        omit(searchOptions, "columns")
      );
    },
    noColumns() {
      return this.formOptions.columns.length == 0;
    },
  },
  watch: {
    formData: {
      deep: true,
      handler() {
        if (!this.$refs.form?.formData) return;
        for (let key in this.formData) {
          this.$refs.form.formData[key] = this.formData[key];
        }
      },
    },
  },
  methods: {
    onReset() {
      const formComponent = this.$refs.form;
      for (let key in formComponent.resetFormData) {
        formComponent.formData[key] = formComponent.resetFormData[key];
      }
      this.$refs.form.onReset();
      this.$message.success($Lang.common.c201);
    },
    onFormDataUpdate(formData) {
      for (let key in formData) {
        this.$set(this.formData, key, formData[key]);
      }
      this.$emit("formDataUpdate", omit(formData, "inner_autoreload"));
    },
  },
  render() {
    return (
      <div
        class={[
          "aone-page-search",
          this.noColumns ? "aone-page-search-hidden" : "",
        ]}
      >
        <BaseForm
          ref="form"
          class="search-container"
          formOptions={this.formOptions}
          onFormDataUpdate={this.onFormDataUpdate}
        />
      </div>
    );
  },
};
</script>
<style lang="scss" scoped>
.aone-page-search {
  background: #f9f9fa;
  box-sizing: border-box;
  .search-container {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0 !important;
    height: initial;
    /deep/ {
      .el-form-item {
        margin: 5px;
      }
    }
  }
}
.aone-page-search-hidden {
  display: none;
}
</style>
